<template>
  <div>
    <!-- 直接上传版 -->
    <layout title="配置视频" :footer="false" description="横版 16:9, 1920*1080，竖版  9:16 1080*1920">
      <a-upload
        action="/baiduapi/batch/uploadOneVideo"
        :headers="{'Authori-zation': token}"
        name="video"
        list-type="picture-card"
        :file-list="fileList"
        multiple
        @change="handleChange"
        @preview="handlePreview"
      >
        <div v-if="fileList.length <= limit">
          <a-icon type="plus" />
          <div class="ant-upload-text"> 上传 </div>
        </div>
      </a-upload>
    </layout>
    <a-modal :visible="previewVisible" :footer="null" @cancel="previewVisible = false">
      <div id="myVideo"></div>
    </a-modal>
  </div>
</template>

<script>
import layout from '../layout'

// function getPic(url){
//   // 获取视频封面图
//   return new Promise(function (resolve) {
//     let dataURL = "";
//     const video = document.createElement("video");
//     video.setAttribute("crossOrigin", "anonymous"); // 处理跨域
//     video.setAttribute("src", url);
//     video.setAttribute("preload", "auto");
//     video.addEventListener("loadeddata", function () {
//       const canvas = document.createElement("canvas");
//       const width = video.videoWidth || 400; // canvas的尺寸和图片一样
//       const height = video.videoHeight || 240; // 设置默认宽高为  400  240
//       canvas.width = width;
//       canvas.height = height;
//       canvas.getContext("2d").drawImage(video, 0, 0, width, height); // 绘制canvas
//       dataURL = canvas.toDataURL("image/jpeg"); // 转换为base64
//       resolve(dataURL);
//     });
//   });
// }

export default {
  data() {
    return {
      limit: 99999,
      fileList:[],
      previewImage:'',
      previewVisible:false,
      list:[]
    }
  },
  methods:{
    async beforeUpload(file){
      console.log(file)
      if(!(file.type === 'video/mp4')){
        this.$message.error('只能上传mp4文件')
        return Promise.reject()
      }
      return Promise.resolve()
    },
    async handlePreview(file) {
      // console.log(file)
      // 解决video无法重新更新视频的bug
      this.previewVisible = true;
      this.$nextTick(()=>{
      //   <video id="myVideo" style="width: 100%" controls >
      // </video>
        let video = document.createElement("video")
        video.controls = true
        video.width = 478
        let sourceDom = document.createElement("source")
        sourceDom.src = file.preview
        let myVideo = document.getElementById('myVideo')
        video.appendChild(sourceDom)
        myVideo.appendChild(video)
        this.previewImage = file.preview;
      })
    },
    async handleChange(e){
      let myFileList = []
      let list = []
      console.log(e)
      for(let item of e.fileList){
        if(item.status == 'uploading' && item.type == 'video/mp4'){
          myFileList.push(item)
          this.fileList = myFileList;
        }
        if(item.status == 'done' && item.response?.errcode == 0){
          list.push(item.response.data)
          item.preview = item.response.data?.fileurl
          item.url = item.response.data?.fileurl
          myFileList.push(item)
          this.list = list
          this.fileList = myFileList;
        }
      }
      console.log(this.list)
      this.$emit('update:form', this.list)
    },
  },
  watch:{
    previewVisible(val){
      if(!val){
        // 清除video中的内容
        let myVideo = document.getElementById('myVideo')
        let child = myVideo.lastElementChild
        while(child){
          myVideo.removeChild(child); 
          child = myVideo.lastElementChild; 
        }
      }
    }
  },
  computed:{
    token(){
      return this.$store.state.user.userInfo.token
    }
  },
  components:{layout},
}
</script>

<style lang="less" scoped>

</style>